<template>
  <div>
    <!-- 回收单明细 -->
    <el-dialog
      v-el-drag-dialog
      :title="`回收单明细：${titleName}`"
      :visible.sync="visible"
      width="1024px"
      height="600px"
    >
      <div class="center">
        <!-- 描述列表 -->
        <el-descriptions size="medium" style="margin-top: 20px;">
          <el-descriptions-item label="回收机构">{{ temp.orgName }}</el-descriptions-item>
          <el-descriptions-item label="回收人">{{ temp.targetUser }}</el-descriptions-item>
          <el-descriptions-item label="回收时间">{{ temp.happendTime }}</el-descriptions-item>
          <el-descriptions-item label="回收顾客">{{ temp.csmName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ temp.csmPhone }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ temp.csmAddress }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ temp.remark }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions size="medium" style="margin-bottom: 30px;">
          <el-descriptions-item label="支付方式">{{ temp.paymentMethod }}</el-descriptions-item>
        </el-descriptions>

        <!-- 表格1 -->
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">回收商品列表</span>
          </div>
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData.column"
            :data="tableData.data"
            :total="tableData.total"
            custom-column
            show-summary
            align="center"
          />
        </div>

        <!-- 表格2 -->
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">置换商品列表</span>
          </div>
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData01.column"
            :data="tableData01.data"
            :total="tableData01.total"
            custom-column
            show-summary
            align="center"
          />
        </div>
      </div>

      <!-- 红字 -->
      <div class="red">
        <div class="red01">
          费用金额：{{ cost }}
        </div>
        <div>
          费用金额 = 置换合计 - 回收合计，正数表示收入，负数表示支出
        </div>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'recallOrderDetails',
    data() {
      return {
        visible: false,
        titleName: null,
        temp: [],
        cost: '16',
        tableData: {
          total: 0,
          column: [
            // {
            //   prop: 'num',
            //   label: '#',
            //   width: 30
            // },
            {
              type: 'index',
              index: this.indexMethod,
              width: 50
            },
            {
              prop: 'gtName',
              label: '商品类型',
              width: 150
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 150
            },
            {
              prop: 'specName',
              label: '规格型号',
              width: 150
            },
            {
              prop: 'unitName',
              label: '单位',
              width: 150
            },
            {
              prop: 'gdStatus',
              label: '状态',
              width: 150
            },
            {
              prop: 'goodsCount',
              label: '回收数量'
            },
            {
              prop: 'netWeight',
              label: '回收重量'
            },
            {
              prop: 'price',
              label: '回收单价'
            },
            {
              prop: 'amount',
              label: '回收总价'
            },
            {
              prop: 'btNoIDS',
              label: '芯片号'
            },
            {
              prop: 'bottleCodes',
              label: '钢瓶号'
            }
          ],
          data: [{ 'recyId': 8312, 'billCode': 'HSD12109277413', 'reclGdFlag': 0, 'specCode': 'S0087', 'specName': '15kg进口气瓶', 'unitId': 1, 'unitName': '只', 'gtId': 109, 'gtName': '钢瓶', 'goodsId': 681, 'goodsName': '15kg进口气瓶', 'gdStatus': 1, 'price': 20.00, 'pricingMode': 1, 'goodsCount': 1, 'netWeight': 0.00, 'amount': 20.00, 'groupIndex': 0, 'corpSN': 6, 'status': 0, 'createUserId': 0, 'createUser': '007', 'createTime': '2021-09-27T10:32:52.000Z', 'modifyUserId': 0 }]
        },
        tableData01: {
          total: 0,
          column: [
            // {
            //   prop: 'num',
            //   label: '#',
            //   width: 30
            // },
            {
              type: 'index',
              index: this.indexMethod,
              width: 50
            },
            {
              prop: 'gtName',
              label: '商品类型',
              width: 150
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 150
            },
            {
              prop: 'specName',
              label: '规格型号',
              width: 150
            },
            {
              prop: 'unitName',
              label: '单位',
              width: 150
            },
            {
              prop: 'gdStatus',
              label: '状态',
              width: 150
            },
            {
              prop: 'goodsCount',
              label: '置换数量'
            },
            {
              prop: 'netWeight',
              label: '置换重量'
            },
            {
              prop: 'price',
              label: '置换单价'
            },
            {
              prop: 'amount',
              label: '置换总价'
            },
            {
              prop: 'btNoIDS',
              label: '芯片号'
            },
            {
              prop: 'bottleCodes',
              label: '钢瓶号'
            }
          ],
          data: [{ 'billCode': 'HSD12109277413', 'gtId': 109, 'gtName': '钢瓶', 'goodsId': 696, 'goodsName': '20KG钢瓶', 'specCode': 'S0123', 'specName': '20型钢瓶', 'unitId': 1, 'unitName': '只', 'price': 12.00, 'goodsCount': 3, 'pricingMode': 1, 'gdStatus': 1, 'amount': 36.00, 'corpSN': 6, 'status': 0, 'createUserId': 0, 'createTime': '2021-09-27T10:32:52.000Z', 'modifyUserId': 0 }]
        }
      }
    },
    methods: {
      open(temp) {
        // console.log(temp)
        this.temp = temp
        this.titleName = temp.billCode
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          // if (temp) {
          //   this.temp = Object.assign(this.temp, temp)
          // }
        })
      },
      indexMethod(index) {
        return index + 1
      }
    }
  }
</script>

<style lang='scss' scoped>
.center {
  height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
}

.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}

.red {
  margin-top: 10px;
  color: red;

  .red01 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
